<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增收货地址</title>
    <meta charset="UTF-8">
    <title>新增收货地址</title>
    <meta name="keywords" content="新增收货地址"/>
    <meta name="description" content="新增收货地址"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" >
    <link rel="stylesheet" th:href="@{/style/admin.css}" >
    <!--<link th:href="@{/shoppingApi/css/public.css}" rel="stylesheet">-->
    <!--<link th:href="@{/shoppingApi/css/publicOfuser.css}" rel="stylesheet">-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <style type="text/css">
        html, body { background: #fff; }
        .product-price{
            width:50px;
            border: none;
        }
        #editor{
            margin-left: 120px;
        }
        .one-img{
            border: 1px solid red;
            height: 100px;
            width: 100px;
            margin-left: 110px;
        }
        .Fengetext{
            color: red;
        }
        .layui-card-header .layui-icon {
            line-height: initial;
            position: absolute;
            right: 0px;
            top: 50%;
            margin-top: -15px;
        }
        .upaction{
            background: red;
        }

        .addproduct{
            background: #1aad19;
            display: block;
            width: 100%;
            height: 46px;
            line-height: 46px;
            font-size: 18px;
        }
        .layui-form-label {
            width: 80px;
            font-size: 16px;
            text-align: left;
            padding: 9px 0;
        }
        .layui-input-block { margin-left: 80px; }
        .layui-select-block {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .layui-select-inline { display: block!important; margin: 0 0 0 10px!important; left: 0!important; }
        .layui-select-inline:nth-child(1) { margin: 0!important; }
        .layui-form-switch { margin-top: 0; }
        .layui-form-onswitch {
            border-color: #f7012a;
            background-color: #f7012a;
        }
        .fixed-address {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            background-color: #F70029;
            z-index: 10;
        }
    </style>
</head>
<body>

<div>
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" th:value="${''}" id="name" name="name" autocomplete="off" placeholder="请输入姓名" value="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input type="text" id="phone" th:value="${''}"  name="phone" autocomplete="off" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="display:none;">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input type="text" data="0" id="address" disabled="disabled" th:value="${''}" name="address" autocomplete="off" placeholder="请输入地址" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <form name="form" class="form">
                        <label class="layui-form-label">选择地区</label>
                        <div class="layui-input-block layui-select-block">
                            <div class="layui-input-inline layui-select-inline">
                                <select name="quiz1" id="yj"  lay-verify="required"   lay-filter="selectyj">
                                    <option value="0">省份</option>
                                </select>
                            </div>
                            <div class="layui-input-inline layui-select-inline">
                                <select name="quiz2" id="rj" lay-filter="selectrj">
                                </select>
                            </div>
                            <div class="layui-input-inline layui-select-inline" >
                                <select name="quiz3" id="sj" lay-filter="selectsj">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详细地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="detailAddress" th:value="${''}" name="detailAddress" autocomplete="off" placeholder="请输入详细地址" value="" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">默认地址</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="marriage" id="isDefault" lay-skin="switch" lay-text="是|否">
                    </div>

                </div>
            </div>
        </div>


    </div>
</div>

<!--<div class="layui-form-item">-->
    <!--<div style="margin: 10px;">-->
        <!--<button class="layui-btn addproduct" id="sure" th:data="${'0'}" lay-submit="" lay-filter="demo1" onclick="saveArea(this)">保存</button>-->
    <!--</div>-->
    <!--&lt;!&ndash;<button type="reset" class="layui-btn layui-btn-primary">重置</button>&ndash;&gt;-->
<!--</div>-->
</div>
</div>
<button class="layui-btn addproduct fixed-address" id="sure" th:data="${'0'}" lay-submit="" lay-filter="demo1" onclick="saveArea(this)">保存</button>
</body>
<!--<script th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>-->
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
<script>
    var header = $("meta[name='_csrf_header']").attr("content");
    var token =$("meta[name='_csrf']").attr("content");
    function isPoneAvailable(poneInput) {
        var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!myreg.test(poneInput)) {
            return false;
        } else {
            return true;
        }
    }
    function saveArea(obj) {
        var id=$(obj).attr('data');
        var name=$("#name").val();
        var adids=$.trim($("#address").attr('adid'));
        if (!name) {
            $.toast("请输入姓名", "cancel");
            return;
        }
        var phone=$("#phone").val().replace(/\s+/g,"");
        if (!phone) {
            $.toast("请输入手机号", "cancel");
            return;
        }
        if(!isPoneAvailable(phone)){
            $.toast("请输入正确的手机号", "cancel");
            return;
        }
        var address=$.trim($("#address").attr('data'));
         
        var length1=address.split(',').length;
        if(length1!=3&&length1>0) {
            $.toast("请选择完地址(省-市-区)!", "cancel");
            return;
        }
        var detailAddress=$("#detailAddress").val();
        if (!detailAddress) {
            $.toast("请输入详细地址", "cancel");
            return;
        }
        var ischecked=$("#isDefault").is(":checked");
        var isdefault=0;
        if(ischecked==true){
            isdefault=1;
        }
if(name==""||phone==""){
    $.toast("地址信息不完整!", "cancel");
    return;
}

        //alert(id+"---"+name+"---"+phone+"---"+address+"---"+detailAddress+"---"+ischecked+"---");return;
        $.ajax({
            url: '/wap/addressAddOrEdit?id='+id+"&addressIds="+address+"&detailAddress="+detailAddress+"&name="+name+"&phone="+phone+"&isdefault="+isdefault,
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function(data){
                if(data.data>0){
                    $.toast("保存成功",500, function() {
                        if(data.errorDetail!=null&&data.errorDetail!=""&&data.errorDetail!="null"){
                            window.location.href=data.errorDetail;
                        }else {
                            window.location.href='/wap/myAddress';
                        }
                    });
                }
                else {
                    if(data.data==-1){
                        $.toast("地址信息不完整，失败", 'cancel');
                    }else {
                        $.toast("保存失败", 'cancel');
                    }
                }
            },
            beforeSend : function(xhr) {
                xhr.setRequestHeader(header, token);
            }
        });
    }

    var sjId;
    var provinceName="",cityName="",areaName="";
    var provinceId=0,cityId=0,areaId=0;
    $(document).ready(function(){
        layui.use('form', function(){
            var form = layui.form;
            form.on('select(selectyj)', function(data){
                var yjId=data.value;
                loadrj(yjId)//调用二级
                provinceName=data.elem[data.elem.selectedIndex].text;
                provinceId=yjId+",";
                $("#address").attr('data',provinceId);
            });
            form.render();

            form.on('select(selectrj)', function(data){
                var rjId=data.value;
                loadsj(rjId);
                cityName=data.elem[data.elem.selectedIndex].text;
                cityId=rjId+",";
                $("#address").attr('data',cityId);

                // var  strid="";var  strname="";
                // var strdd="";
                // $.ajax({
                //     url:"/selectAreaList?level=2&parentId="+rjId,
                //     async:false,
                //     success:function (result) {
                //         var data=result;
                //         $('#sj').empty();
                //         $("#sj").append("<option value='0'>请选择</option>");
                //         var sjint=1;
                //         for(var index in data){
                //             if(sjint==1){
                //                 strid=data[index].id;
                //                 strname=data[index].name;
                //             }
                //             sjint=sjint+1;
                //         }
                //     }
                // })
                // cityId=rjId+",";
                // areaId=strid;areaName=strname;
                // $("#address").val(provinceName+cityName+areaName);
                // $("#address").attr('data',provinceId+cityId+areaId)

            });
            form.render();

            form.on('select(selectsj)', function(data){
              var sjId=data.value;
                areaName=data.elem[data.elem.selectedIndex].text;
                areaId=sjId;
                $("#address").val(provinceName+cityName+areaName);
                $("#address").attr('data',provinceId+cityId+areaId)
            });
            form.render();
        });
        var date=new Date();
        var year=date.getFullYear();
        var productNo=Math.random().toString().substring(2);
        var str=year.toString()+productNo;
        $("#productNo").attr("value",str);
    });



</script>

<script>
    $(document).ready(function () {
        loadProvince();

    })

    function loadProvince() {
        var str = "";
        $.ajax({
            url:"/selectAreaList?parentId=0&level=0",
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function (result) {
                var data=result;
                for(var index in data){
                    str +="<option value='" +data[index].id+ "'>" + data[index].name+ "</option>";
                }
            }
        });
        $("#yj").html(str);
    }

    function loadrj(id) {

        var  str="<option value='0'>请选择</option>";
        $.ajax({
            async: false,
            url:"/selectAreaList?level=1&parentId="+id,
            success:function (result) {
                var data=result;
                $('#rj').empty();
                for(var index in data){
                    str +="<option value='" +data[index].id+ "'>" + data[index].name+ "</option>";
                }
            }
        })
        $("#rj").html(str);
        layui.use('form', function() {
            var form = layui.form;
            form.render();
        })
    }

    function loadsj(id) {
        var  str="<option value='0'>请选择</option>";
        $.ajax({
            async: false,
            url:"/selectAreaList?level=2&parentId="+id,
            success:function (result) {
                var data=result;
                $('#sj').empty();
                for(var index in data){
                    str +="<option value='" +data[index].id+ "'>" + data[index].name+ "</option>";
                }
            }
        })
        $("#sj").html(str);
        layui.use('form', function() {
            var form = layui.form;
            form.render();
        })
    }
</script>
</html>